import { createNamespacedHelpers } from 'vuex';

let { mapState } = createNamespacedHelpers('user');

export default {
    data() {
        return { list: [] }
    },
    computed: {
        ...mapState(['userInfo'])
    },
    methods: {
        getMenuList(authList) {
            let menu = [];
            let map = {}//建立一个映射表
            authList.forEach(m => {
                m.children = [];
                map[m.id] = m; //映射表 如：{1:菜单,2:菜单}
                if (m.pid == -1) {
                    menu.push(m); // 如果是根 就直接push到menu中
                } else {//放在对应的根下面 有的话就放在对应的children上
                    map[m.pid] && map[m.pid].children.push(m);
                }
            });
            return menu;
        }
    }, 
    mounted() {//获取菜单列表 infoPublish
    console.log('this.userInfo.authList', 'this.userInfo.authList')
        this.list = this.getMenuList(this.userInfo.authList);console.log(this.list, 'this.list')
    },
    render() {
        let renderChildren = (list)=>{//渲染孩子的菜单
               return list.map(child=>{
                return child.children.length ? 
                <el-submenu index={child._id}>
                    <div slot="title">{child.name}</div>
                    {/* 如果有孩子的话继续渲染 -- 递归 */}
                    {renderChildren(child.children)}
                </el-submenu>:
                //自己对应当前的路径
                <el-menu-item index={child.path}>{child.name}</el-menu-item>
            })
        }
        return <el-menu
            background-color="#333"
            text-color="#fff"
            active-text-color="#ffd04b"
            router={true}
        >
            {renderChildren(this.list)}
      </el-menu> 
    }
}